/**
 * @license
 * Copyright 2018 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

{namespace googlecodelabs.Codelab.Templates}

/**
 * Renders the main structure
 */
{template .structure}
  {@param? feedback: string}
  {@param homeUrl: string}

  <div id="codelab-title">
    <div id="codelab-nav-buttons">
      <a href="{$homeUrl}" id="arrow-back"><i class="material-icons">close</i></a>
      <a href="#" id="menu"><i class="material-icons">menu</i></a>
    </div>
    <div class="codelab-time-container"></div>
  </div>
  <nav id="drawer"></nav>
  <div id="main">
    <div id="steps"></div>
    <div id="controls">
      <div id="fabs">
        <a href="#"
           id="previous-step"
           title=
               "{msg desc="Tooltip for button that takes user back to the previous step of the
                   codelab."}
                 Previous step
               {/msg}">
          {msg desc="Button that takes user back to the previous step of the codelab."}
            Back
          {/msg}
        </a>
        <div class="spacer"></div>
        <a href="#"
           id="next-step"
           title=
               "{msg desc="Tooltip for button that takes user to the next step of the codelab."}
                 Next step
               {/msg}">
          {msg desc="Button that takes user to the next step of the codelab."}
            Next
          {/msg}
        </a>
        <a href="{$homeUrl}"
           id="done"
           hidden
           title=
               "{msg desc="Tooltip for button that indicates the codelab user has completed the
                   codelab."}
                 Codelab complete
               {/msg}">
          {msg desc="Button that indicates the codelab user has completed the codelab."}
            Done
          {/msg}
        </a>
      </div>
    </div>
  </div>
  <div class="metadata">
    <a {if $feedback}target="_blank" href="{$feedback}"{else}href="#" id="codelab-feedback"{/if}>
      <i class="material-icons">bug_report</i> {msg desc="Button that the user can click to report
          an bug or error."}
        Report a mistake
      {/msg}
    </a>
  </div>
{/template}

/**
 * Renders the title
 */
{template .title}
  {@param title: string}
  {@param url: string}

  <h1 is-upgraded class="title">
    <a href="{$url}">{$title}</a>
  </h1>
{/template}

/**
 * Renders the time remaining
 */
{template .timeRemaining}
  {@param time: number}

  <div class="time-remaining"
       tabindex="0"
       role="timer"
       title=
           "{if $time == 1}
             {msg desc="Tooltip indicating expected time remaining (1 minute) for user to complete
                 codelab."}
               Estimated time remaining: {$time} minute
             {/msg}
           {else}
             {msg desc="Tooltip indicating expected time remaining in minutes for user to complete
                 codelab."}
               Estimated time remaining: {$time} minutes
             {/msg}
           {/if}">
    <i class="material-icons">access_time</i>
    {if $time == 1}
      {msg desc="Label indicating expected time remaining (1 minute) for user to complete codelab."}
        {$time} min remaining
      {/msg}
    {else}
      {msg desc="Label indicating expected time remaining in minutes for user to complete codelab."}
        {$time} mins remaining
      {/msg}
    {/if}
  </div>
{/template}

/**
 * Renders the drawer
 */
{template .drawer}
  {@param steps: list<string>}

  <div class="codelab-time-container"></div>
  <div class="steps">
    <ol>
      {for $step in $steps}
        <li>
          <a href="#{index($step)}"><span class="step"><span>{$step}</span></span></a>
        </li>
      {/for}
    </ol>
  </div>
{/template}
